<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>ITLibrary</title>
	<link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">ITLibrary</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item layui-this"><a href="">首页</a></li>
			</ul>
			<ul id="login-menu" class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:void(0);" onclick="openLogin()">
						<i class="layui-icon layui-icon-username"></i> 登录
					</a>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:void(0);" onclick="openRegister()">
						<i class="layui-icon layui-icon-auz"></i> 注册
					</a>
				</li>
			</ul>
			<ul id="user-menu" class="layui-nav layui-layout-right layui-hide">
				<li class="layui-nav-item">
					<a href="">我的借阅<span class="layui-badge">9</span></a>
				</li>
			</ul>
		</div>
		
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree"  lay-filter="test">
					<li class="layui-nav-item layui-this" style="text-align:center"><a href="">编程语言</a></li>
					<li class="layui-nav-item" style="text-align:center"><a href="">办公软件</a></li>
					<li class="layui-nav-item" style="text-align:center"><a href="">人工智能</a></li>
					<li class="layui-nav-item" style="text-align:center"><a href="">操作系统</a></li>
					<li class="layui-nav-item" style="text-align:center"><a href="">数据库</a></li>
				</ul>
			</div>
		</div>
  
		<!-- 内容主体区域 -->
		<div class="layui-body">
			<form class="layui-form" style="padding:20px 20px 5px 35px">
				<div class="layui-inline">
					<label class="layui-input-label">图书名称：</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="product_name" style="height:30px" autocomplete="off" class="layui-input">
					</div>
				</div>
			
				<div class="layui-inline" style="padding-left:20px">
					<label class="layui-input-label">图书作者：</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="product_name" style="height:30px" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline" style="padding-left:20px">
					<button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-submit>
						<i class="layui-icon layui-icon-search"></i>搜索图书
					</button>
				</div>
			</form>
	
			<hr>
			
			<div align="center">
				<div class="layui-row layui-col-space1" style="padding-top:20px">
					<div class="layui-col-md3">
						<img src="images/5a5c6d05N0f2172f9.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>书名:Python基础教程</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">5</span>&nbsp;&nbsp;
							   总数：<span style="color:red">10</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/5abc414bNade87295.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>书名:Python神经网络编程</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/5ac1ac1dN430d6749.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/5b5eae6fN21c53e10.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
				</div>
				
				<div class="layui-row layui-col-space1" style="padding-top:20px">
					<div class="layui-col-md3">
						<img src="images/5b7fa958N3e5e3bab.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/5badc240Nec491c62.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/515b94d13035444f.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/5cda5a82N88053d14.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
				</div>
				
				<div class="layui-row layui-col-space1" style="padding-top:20px">
					<div class="layui-col-md3">
						<img src="images/c610ad2df827b3f8.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/056492b4426bc8e8.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/d0037cc40be00077.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
					<div class="layui-col-md3">
						<img src="images/d83aff379232fd27.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>苹果手机:降价大甩卖</p>
							<p>作者:张三 李四 王五</p>
							<p>
							   剩余：<span style="color:red">3</span>&nbsp;&nbsp;
							   总数：<span style="color:red">5</span>
							</p>
						</div>
						<button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
						</button>
					</div>
				</div>
			</div>
			
			<div id="pagination" align="center" style="padding:20px 0px 20px 0px"></div>
		</div>
		
		<!-- 底部固定区域 -->
		<div class="layui-footer" style="text-align:center">
			©www.jwkt.net 版权所有
		</div>
		
		<!-- 登录表单 -->
		<div id="login-layer" style="display: none">
			<form id="login-form" class="layui-form" style="padding:45px 20px 5px 20px">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-block">
						<input type="text" name="title" class="layui-input" id="username" style="width:80%">
					</div>
					<div id="msg" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密　码</label>
					<div class="layui-input-block">
						<input type="password" name="password" class="layui-input" style="width:80%">
					</div>
					<div id="msg" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
			</form>
		</div>
		
		<!-- 注册表单 -->
		<div id="register-layer" style="display: none">
			<form id="register-form" class="layui-form" style="padding:45px 20px 5px 20px">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-block">
						<input type="text" name="username" class="layui-input" id="username" style="width:80%">
					</div>
					<div id="msg-1" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密　码</label>
					<div class="layui-input-block">
						<input type="text" name="password" class="layui-input" style="width:80%">
					</div>
					<div id="msg-2" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓　名</label>
					<div class="layui-input-block">
						<input type="text" name="name" class="layui-input" style="width:80%">
					</div>
					<div id="msg-3" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电　话</label>
					<div class="layui-input-block">
						<input type="text" name="phone" class="layui-input" style="width:80%">
					</div>
					<div id="msg-4" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地　址</label>
					<div class="layui-input-block">
						<input type="text" name="address" class="layui-input" style="width:80%">
					</div>
					<div id="msg-5" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<script src="../layui/js/jquery.min.js"></script>
	<script src="../layui/layui.js"></script>
	<script>
	//JavaScript代码区域
	layui.use(['element', 'form', 'laypage', 'layer'], function(){
		var element = layui.element,
			laypage = layui.laypage,
			form = layui.form,
			layer = layui.layer;
			
		laypage.render({
			elem: 'pagination',
			count: 50,
			limit: 12,
			curr: 2
		});
	});
	
	function openLogin() {
		layer.open({
			type: 1,
			title: "用户登录",
			area: ['500px', '270px'],
			btnAlign: 'c',
			btn: ['登录', '取消'],
			yes: function(index, layero){
				$("#login-menu").addClass("layui-hide");
				$("#user-menu").removeClass("layui-hide");
			},
			btn2: function(index, layero){
				return true;
			},
			content: $("#login-layer")
		});
	}
	
	function openRegister() {
		layer.open({
			type: 1,
			title: "用户注册",
			area: ['500px', '420px'],
			btnAlign: 'c',
			btn: ['注册', '取消'],
			yes: function(index, layero){
				//alert($("#register-form").serialize());
				
				$("#msg-1").removeClass("layui-hide");
				layer.style(index, {height: "460px"});
			},
			btn2: function(index, layero){
				return true;
			},
			content: $("#register-layer")
		});
	}
	</script>
	
	
</body>



</html>